<template>
    <div>
        <h1 class="title">注册</h1>
        <InputElement type="text" @validate="validateUsername"
         :info="username.info"
        v-model="username.value" >用户名：</InputElement>
        <InputElement type="password" v-model="pwd.value"  >密码：</InputElement>
        <InputElement type="password" v-model="confirm.value">确认密码：</InputElement>
        <input type="button" value="提交" @click="handleClick">
    </div>
</template>

<script>
import InputElement from '../components/InputElement.vue';
import {usernameExist,reg} from '../services/user';
export default {
    components:{InputElement},
    data(){
        return {
            username:{
                value:"",
                info:""
            },
             pwd:{
                value:"",
                info:""
            },
             confirm:{
                value:"",
                info:""
            }
        }
    },
    methods:{
        async validateUsername(e){
            // console.log("e",e.target.value);
            // this.username.value = e.target.value;
            if(/^\w{6,20}$/.test(e.target.value)){
                
                let data = await usernameExist(e.target.value);
                if(data.status == 0){
                    this.username.info = "重名";
                }else{
                    this.username.info = "√";
                }
            }else{
                this.username.info = "x";
            }
        },
        handleClick(){
            // console.log(this.username.value,this.pwd.value,this.confirm.value);
            this.$router.push("/login");
        }
    }
}
</script>

<style>
    .title{
        color:red;
    }
</style>